<template>
  <div class="container" v-loading="fullLoading">
<!--    <div class="top-banner">
      <img src="../assets/images/top-img-2.jpg">
    </div>-->

    <div class="change-pc">
      <!-- 这里需要给组件添加一个class，用于控制固定的位置，看css注释部分 -->
      <sticky-slot class="stickyTop">
        <van-sticky>
          <van-notice-bar
              left-icon="volume-o"
              text="饥渴慕义的人有福了，因为他们必得饱足，欢迎家人报名学习。"
          />
          <div class="audio-box">
            <vue-core-video-player
                ref="videoPlayer"
                :src="audioUrl"
                :cover="cover"
                :title= "title"
                :autoplay="false"
                :loop="true"
                @play="play"/>
<!--            <img v-else src="../assets/images/video-img-3.jpg" class="video-bg">-->
          </div>
        </van-sticky>
         <el-collapse v-model="activeNames" @change="handleChange">
              <el-collapse-item title="概要" name="1">
                <template slot="title">
                  <div class="video-list  gy">
                    <div class="video-title">
                      <p class="video-title-txt">概要</p>
                    </div>
                  </div>
                </template>
                <div class="pd-r-l-20 fs-14">
                  {{contentGy || '暂无内容'}}
                </div>
              </el-collapse-item>
            </el-collapse>

      </sticky-slot>

      <div class="video-list" v-loading="fullLoading">
        <div class="video-title">
          <p class="video-title-txt">灵命成长</p>
        </div>
        <div class="video-item" @click="changeVideo(item)"  v-for="item in videoList" >
          <div class="video-card">
            <img src="../assets/images/video-img-2.jpg" class="video-cover">
<!--            <div class="video-time-tag">11:54</div>-->
          </div>
          <div class="video-text">
            <div class="video-text-top">
              <div class="video-text-info">主题</div>
              <div class="video-text-title">
                {{item.title}}
              </div>
            </div>
            <div class="video-text-center ellipsis">
              {{item.content }}
            </div>
            <div class="video-text-bottom">
              <div class="video-text-watch">
<!--                18121人次观看-->
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>

<!--    <img src="../assets/images/send1.png">-->
    <div class="send-info" @click="showSendDialog">报名</div>

    <!--  报名面板-->
    <van-action-sheet v-model="show" title="线上课程报名" v-loading="loading">
      <van-notice-bar
          left-icon="volume-o"
          text="报名后，请留意接听电话。"
      />
      <van-form @submit="onSubmit">
        <van-field
            v-model="formData.username"
            name="姓名"
            label="姓名"
            placeholder="姓名"
            :rules="[{ required: true, message: '请填写姓名' }]"
        />

        <van-field name="radio" label="性别">
          <template #input>
            <van-radio-group v-model="formData.gender" direction="horizontal">
              <van-radio name="0">男</van-radio>
              <van-radio name="1">女</van-radio>
              <van-radio name="2">保密</van-radio>
            </van-radio-group>
          </template>
        </van-field>

        <van-field
            v-model="formData.age"
            name="年龄"
            label="年龄"
            placeholder="年龄"
            :rules="[{ required: true, message: '请填写年龄' }]"
        />

        <van-field
            v-model="formData.cellPhone"
            name="手机"
            label="手机"
            placeholder="手机"
            :rules="[{ required: true, message: '请填写手机' }]"
        />

        <van-field
            readonly
            clickable
            name="picker"
            :value="formData.degree"
            label="学历"
            placeholder="点击选择学历"
            @click="showDegree = true"
            :rules="[{ required: true, message: '请选择学历' }]"
        />
        <van-popup v-model="showDegree" position="bottom">
          <van-picker
              show-toolbar
              :columns="columnsDegree"
              @confirm="onConfirmDegree"
              @cancel="showDegree = false"
          />
        </van-popup>

        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">提交</van-button>
        </div>
      </van-form>
    </van-action-sheet>

  </div>
</template>

<script>
import stickySlot from '@/components/stickySlot.vue';
import { request } from '@/assets/js/utils/request';
import {Toast,Dialog} from "vant";
export default {
  name: "index",
  components:{stickySlot},
  data(){
    return{
      fullLoading:false,
      loading:false,
      formData:{},
      /**视频相关**/
      // audioUrl:'http://rest.trueandpeace.com/Items/b9f9d00618e59bef820895c9a3af02bc/Download?api_key=02434dd894c24477b0d784584eca2708',
       audioUrl : require('../assets/audio.mp4'),
      cover:'http://rest.trueandpeace.com/pic/yinpin.jpg',
      title:'',
      show:false,
      /**关于学历**/
      columnsDegree: ['小学以下','小学', '初中','专科', '高中', '本科', '硕士', '博士','海归及留学生'],
      showDegree: false,
      videoList:[],
      activeNames: [],
      contentGy:''
    }
  },
  created(){

    //通过链接获取分享链接人的id

    this.ydrId = this.getQueryParam();
    this.getVideoList() ;
  },
  methods:{
    getQueryParam() {
      const queryString = window.location.href;
      let arr = queryString.split('=') ;
      return arr[1]
    },
   getVideoList(){
      this.fullLoading = true ;
      request('rest/cdweb2/videoList',
          "get"
      ).then(res=> {
        this.videoList = res.rows
        this.fullLoading = false ;
      }).catch(err=>{
        this.fullLoading = false ;
      })
    },
    showSendDialog(){
      this.show = true
    },
    onSubmit() {
      Dialog.confirm({
        title: '提示',
        message:
            '提交后不可修改，是否提交？',
      })
      .then(() => {
        this.loading = true ;
        request('rest/cdweb2/add', "post", Object.assign(this.formData,{userToken:this.ydrId})).then(res=>{
            if (res.code==0){
              Toast.success('报名成功');
              this.show = false
            }else{
              Toast.fail('报名失败');
            }
            this.loading = false ;
        })
      })
      .catch(() => {
          this.loading = false ;
      });
    },
    onConfirmDegree(value) { //学历
      this.formData.degree = value
      this.showDegree = false;
    },
    play(){
//解决视频全屏时，进度条不消失的问题
      let bottomBorder = document.createElement("div"); //创建一个新的div标签
      bottomBorder.innerText = "";  //设置标签的文本内容
      bottomBorder.style.backgroundColor = 'red';
      bottomBorder.style.opacity = '0';
      bottomBorder.style.width = '100%';
      bottomBorder.style.height = '30px';
      bottomBorder.style.position = 'absolute';
      bottomBorder.style.zIndex = '9999'
      bottomBorder.style.left = '0px';
      bottomBorder.style.bottom = '0px';
      bottomBorder.style.cursor = 'pointer'

      let rightBorder = document.createElement("div"); //创建一个新的div标签
      rightBorder.innerText = "";  //设置标签的文本内容
      rightBorder.style.backgroundColor = 'blue';
      rightBorder.style.opacity = '0';
      rightBorder.style.width = '30px';
      rightBorder.style.height = '100%';
      rightBorder.style.position = 'absolute';
      rightBorder.style.zIndex = '9999'
      rightBorder.style.top = '0px';
      rightBorder.style.right = '0px';
      rightBorder.style.cursor = 'pointer'

      // 绑定点击事件
      // bottomBorder.addEventListener('click', function() {
      //   let playIcon = document.getElementsByClassName("vcp-layer play-pause-layer")
      //   playIcon[0].style.display = 'none'
      // });
      let targetDiv = document.getElementsByClassName("vue-core-video-player-layers"); //获取目标DIV元素
      targetDiv[0].appendChild(bottomBorder); //将新的标签添加到目标DIV元素的最后面
      targetDiv[0].appendChild(rightBorder); //将新的标签添加到目标DIV元素的最后面
    },
    changeVideo(item){
       this.audioUrl = item.url
       this.contentGy = item.content
    },
    handleChange(){

    }
  }
}
</script>

<style scoped>
.container{width: 100%;overflow: hidden}
/* 通过设置top的值，控制需要固定在什么位置，0是顶部，值为number(px) */
.stickyTop {
  top: 0;
  z-index: 10;
}


.top-banner{
  width: 100vw;
  margin-bottom: 2px;
}
.top-banner img {
  display: block;
  height: 54px; /*563px*72px*/
  width: 100%;
}
.audio-box{
  /*padding: 10px;*/
  background: #FFFFFF;
}
.video-list {
  margin-top: 20px;
  position: relative;
  box-sizing: border-box;
  padding: 0 22px;
}
.video-list.gy{width: 100%;margin-top: 0} /*概要相关*/
.video-title {
  position: relative;
  height: 34px;
  display: flex;
  justify-content: flex-end;
}
.video-bg{height: 250px;width: 100%}
@media (min-width: 992px) {
  .video-bg{height: 80vh}
  .audio-box{
    margin: 0 auto;
    height: 80vh;
  }
  .change-pc{
    display: flex;
  }
  .video-list{
    /*height: calc(100vh - 80px);*/
    /*overflow-y: auto;*/
    width: 400px;
  }

  /*.video-list  .gy{*/
  /*  height: auto;*/
  /*}*/
}
/* 定义关键帧 */
@keyframes imgInOut {
  0% { transform: scale(1); } /* 初始状态为原始大小 */
  50% { transform: scale(1.1); } /* 中间状态为放大到1.2倍 */
  100% { transform: scale(1); } /* 结束状态返回原始大小 */
}

/* 将动画应用于元素 */
.send-info img {
  animation-name: imgInOut; /* 指定要应用的动画名称 */
  animation-duration: 3s; /* 设置动画持续时间（单位为秒）*/
  animation-iteration-count: infinite; /* 无限次重复动画 */
  animation-direction: alternate; /* 交替反向运行动画 */
}
.send-info{
  animation-name: imgInOut; /* 指定要应用的动画名称 */
  animation-duration: 3s; /* 设置动画持续时间（单位为秒）*/
  animation-iteration-count: infinite; /* 无限次重复动画 */
  animation-direction: alternate; /* 交替反向运行动画 */
  display: flex;flex-direction: column;justify-content: center;align-items: center;margin-bottom: 25px;
  position: fixed;
  bottom:30px;
  right: 30px;
  background: rgba(255, 255, 255,.8);
  border-radius: 50%;
  height: 60px;
  width: 60px;
  box-shadow: 0 0 6px rgba(64,158,255,.12);
  z-index: 999;
  color:rgb(64,158,255);
  cursor: pointer;
  font-size: 18px;
}
.send-info img{width: 30px;height: 30px}
.send-info span{font-size: 12px}
.video-title-txt{
  font-size: 20px;
  font-weight:  bold;
  letter-spacing: 3px;
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 3;
  margin-top: -17px;
}
.gy .video-title-txt{margin-top: -25px}/*概要相关*/
.video-title::after{
  content: '';
  position: absolute;
  width: 90px;
  height: 6px;
  border-radius: 5px;
  background: linear-gradient(to bottom, rgba(140, 197, 255,.1),rgba(140, 197, 255,1));
  top: 60%;
  left: 0;
  z-index:1;
}
.gy .video-title::after{width: 50px} /*概要相关*/
.video-item {
  box-sizing: border-box;
  padding: 10px 0;
  border-bottom: 1px solid #e5e5e5;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.video-card {
  position: relative;
  width: 144px;
  height: 80px;
  overflow: hidden;
  border-radius: 8px;
}
.video-cover {
  width: 100%;
  height: 100%;
}
.video-time-tag {
  box-sizing: border-box;
  padding: 2px 4px;
  font-size: 8px;
  color: #fff;
  border-radius: 2px;
  background-color: rgba(0, 0, 0, 0.9);
  position: absolute;
  top: 6px;
  right: 6px;
}
.video-text {
  height: 80px;
  margin-left: 10px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 4px 0;
}

.video-text-top, .video-text-bottom {
  display: flex;
  align-items: center;
}
.video-text-info {
  box-sizing: border-box;
  padding: 2px 4px;
  font-size: 10px;
  color: #fff;
  border-radius: 2px;
  background-color: #409EFF;
}
.video-text-title {
  margin-left: 2px;
  font-size: 14px;
  color: #333;
  font-weight: bold;
}
.video-text-center.ellipsis {
  width: 100%;
  overflow: hidden; /* 隐藏超出容器范围的内容 */
  text-overflow: ellipsis; /* 显示省略号 */
  display: -webkit-box; /* 将元素作为块级元素进行布局 */
  -webkit-line-clamp: 2; /* 限制文本只显示两行 */
  -webkit-box-orient: vertical; /* 设置文本在垂直方向上排列 */
  line-height: 1.5;
}

.video-text-bottom {
  justify-content: space-between;
}
.video-text-watch, .video-text-apply {
  font-size: 12px;
  color: #98999b;
}
.video-text-apply span {
  color: #e5483a;
}
.title-content{font-size: 16px;font-weight: bold}
.pd-r-l-20{padding: 0 20px}
.fs-14{font-size: 14px}


</style>